<template>
  <div id="software">
    <img class="back" src="@/assets/img/home/content/back.svg" />
    <lazyshow>
      <div class="software-list" id="list1">
        <softwareitem
          v-for="(i, index) in infoArrayOne"
          :key="index"
          :img="i.img"
          :tipcontent="i.content"
          :href="i.href"
        >
          <span slot="title-text"
            >{{ i.title }} /
            <span class="white">{{ i.title }}</span></span
          >
          <span slot="content">{{ i.content }}</span>
        </softwareitem>
      </div>
    </lazyshow>

    <lazyshow>
      <div class="software-list" id="list2">
        <softwareitem
          v-for="(i, index) in infoArrayTwo"
          :key="index"
          :img="i.img"
          :tipcontent="i.content"
          :href="i.href"
        >
          <span slot="title-text"
            >{{ i.title }} /
            <span class="white">{{ i.title }}</span></span
          >
          <span slot="content">{{ i.content }}</span>
        </softwareitem>
      </div>
    </lazyshow>

    <lazyshow>
      <div class="software-list" id="list3">
        <softwareitem
          v-for="(i, index) in infoArrayThere"
          :key="index"
          :img="i.img"
          :tipcontent="i.content"
          :href="i.href"
        >
          <span slot="title-text"
            >{{ i.title }} /
            <span class="white">{{ i.title }}</span></span
          >
          <span slot="content">{{ i.content }}</span>
        </softwareitem>
      </div>
    </lazyshow>

    <lazyshow>
      <div class="software-list" id="list4">
        <softwareitem
          v-for="(i, index) in infoArrayFour"
          :key="index"
          :img="i.img"
          :tipcontent="i.content"
          :href="i.href"
        >
          <span slot="title-text"
            >{{ i.title }} /
            <span class="white">{{ i.title }}</span></span
          >
          <span slot="content">{{ i.content }}</span>
        </softwareitem>
      </div>
    </lazyshow>
  </div>
</template>

<script>
import Lazyshow from "../../common/lazyshow/lazyshow.vue";
import softwareitem from "./softwareitem/softwareitem.vue";
export default {
  name: "software",
  data() {
    return {
      property: "value",
      infoArray: [
        {
          title: "Vscode",
          img: "vscode.svg",
          content:
            "😀Vscode是一款使用Electron框架开发的代码编辑器，十分好看的外观之下不乏强大的功能性，同时生态圈也很好，有很多实用的插件。",
          href: "https://code.visualstudio.com/",
        },
        {
          title: "WebStorm",
          img: "webstorm.svg",
          content:
            "WebStorm作为前端工程师常驻的开发软件有很多年了，其强大丰富的功能性一直得到广大粉丝的喜爱，个人认为对电脑配置要求比Vscode高。",
          href: "https://www.jetbrains.com/webstorm/",
        },
        {
          title: "Sublime",
          img: "sublime.svg",
          content:
            "Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。",
          href: "https://www.sublimetext.com/",
        },
        {
          title: "Chrome",
          img: "chrome.svg",
          content:
            "大名鼎鼎的V8引擎就是出自于这个浏览器，由谷歌公司研发的Chrome，现在可以说在B/S架构里的平台占据了绝对地位。",
          href: "https://www.google.cn/chrome/",
        },
        {
          title: "FireFox",
          img: "firefox.svg",
          content:
            "市场占比仅次于Chrome的浏览器，对于前端开发来说也是必备的一个浏览器，其运行速度，拓展性，安全性都挺不错。",
          href: "http://www.firefox.com.cn/",
        },
        {
          title: "Edge",
          img: "edge.svg",
          content:
            "微软替代了IE浏览器的产物，性能，体验等多方面都比IE浏览器强很多。也是当今C/S架构的一个重要平台。",
          href: "https://www.microsoft.com/zh-cn/edge",
        },
        {
          title: "NactiveMysql",
          img: "mysql.svg",
          content:
            "😍图形化界面操作赞得不行！对于不熟悉数据库的同学简直是再好不过了！",
          href: "http://www.navicat.com.cn/products/navicat-for-mysql",
        },
        {
          title: "PhpStudy",
          img: "php.svg",
          content: "一个十分好用的本地服务器，集成了php,阿帕奇,mysql等环境。",
          href: "https://www.xp.cn/download.html",
        },
        {
          title: "uni-app",
          img: "uniapp.png",
          content: "用vue.js开发多端的一个开源项目，在小程序市场占据主导地位。",
          href: "https://uniapp.dcloud.io/",
        },
        {
          title: "PhotoShop",
          img: "ps.svg",
          content:
            "老生常谈的Ps,作为图形处理界的领头大哥,至今也依然是主流。作为前端开发者，经常有大量需要处理的图形，学会ps可以节省许多百度的时间。",
          href: "https://www.adobe.com/products/photoshop.html",
        },
        {
          title: "PhpStorm",
          img: "phpstorm.svg",
          content:
            "PHPStorm 是 JetBrains 公司开发的一个轻量级且便捷的 PHP IDE，其旨在提供用户效率，可深刻理解用户的编码，提供智能代码补全，快速导航以及即时错误检查。",
          href: "https://www.jetbrains.com/zh-cn/phpstorm/",
        },
        {
          title: "Pycharm",
          img: "python.svg",
          content:
            "PyCharm是一种Python IDE（Integrated Development Environment，集成开发环境），带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具，比如调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测试、版本控制。此外，该IDE提供了一些高级功能，以用于支持Django框架下的专业Web开发。",
          href: "https://www.jetbrains.com/zh-cn/pycharm/",
        },
      ],
    };
  },
  components: {
    softwareitem,
    Lazyshow,
  },

  methods: {},
  mounted() {},
  created() {},
  computed: {
    infoArrayOne() {
      let array = [];
      Object.assign(array, this.infoArray);
      array = array.splice(0, 3);
      return array;
    },
    infoArrayTwo() {
      let array = [];
      Object.assign(array, this.infoArray);
      array = array.splice(3, 3);
      return array;
    },
    infoArrayThere() {
      let array = [];
      Object.assign(array, this.infoArray);
      array = array.splice(6, 3);
      return array;
    },
    infoArrayFour() {
      let array = [];
      Object.assign(array, this.infoArray);
      array = array.splice(9, 3);
      return array;
    },
  },
};
</script>

<style scoped>
#software {
  width: 55%;
  position: absolute;
  top: 100px;
  right: 0px;
  display: flex;
  flex-direction: column;
}
.software-list {
  height: 110px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  position: relative;
  display: flex;
  transition: all 0.2s ease;
  z-index: 20;
}
#list1 {
  margin-left: 25%;
}
#list1:hover {
  margin-left: 15%;
}
#list2 {
  margin-left: 15%;
}
#list2:hover {
  margin-left: 5%;
}
#list3 {
  margin-left: 5%;
}
#list3:hover {
  margin-left: -5%;
}
#list4 {
  margin-left: -5%;
}
#list4:hover {
  margin-left: -10%;
}
.back {
  width: 150%;
  height: 150%;
  top: -10%;
  left: 30%;
  position: absolute;
  z-index: 0;
}
</style>